<template>
    <div class="card-container">
        <div class="card-header">
            <avatar
                :size="36"
                :username="evalData.evaluator"
                :rounded="true"
            ></avatar>
        </div>
        <div class="card-content">
            <rate-group
                :fontSize="14"
                :rateProps="ratesetprops"
                :readonly="true"
                v-model="evaldata"
            >
            </rate-group>
            <div class="eval-remark">
                {{ evalData.remark }}
            </div>
            <div class="evaluation-time">
                {{ momentDateTime(evalData.evaluationtime) }}
            </div>
        </div>
    </div>
</template>

<script >
import { reactive, toRefs } from 'vue';

import RateGroup from '@/components/_common/RateGroup.vue';
import Avatar from '@/components/_common/Avatar.vue';
import moment from 'moment';

import { selfI18n } from '@/i18n/index';
export default {
    name: '',
    components: {
        RateGroup,
        Avatar
    },
    props: {
        evalData: Object
    },
    setup (props, context) {
        const $st = selfI18n;
        const state = reactive({
            evaldata: {
                ...props.evalData
            },
            ratesetprops: [
                {
                    id: 'overallevaluation',
                    label: $st('wp_Overall_evaluation')
                },
                {
                    id: 'replyspeed',
                    label: $st('wp_Responding_speed')
                },
                {
                    id: 'repairspeed',
                    label: $st('wp_Maintenance_quality')
                },
                {
                    id: 'serviceattitude',
                    label: $st('wp_Service_attitude')
                }
            ]
        });
        const momentDateTime = (date) => moment(date).format('YYYY-MM-DD HH:mm:ss');
        return {
            momentDateTime,
            ...toRefs(state)
        };
    }
};
</script>

<style lang='scss' scoped>
.card-container {
  display: flex;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffead4, #ffffff 100%);
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0px 15px 15px;
}
.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  padding: 25px 10px 15px 15px;
}
.eval-remark {
     margin-top: 7px;
     padding-left:4px;
  font-size: 13px;
  text-align: LEFT;
  color: rgba(0, 0, 0, 0.6);
  line-height: 20px;
}
.evaluation-time {
  margin-top: 15px;
  padding-left:4px;
  font-size: 13px;
  font-weight: 400;
  text-align: LEFT;
  color: rgba(0, 0, 0, 0.6);
  line-height: 20px;
}
</style>
